<script setup lang="ts">
import { rootRouteList } from '@/config/routes'

const active = ref(0)
const route = useRoute()
const router = useRouter()
const show = computed(() => {
  if (route.name && rootRouteList.includes(route.name)) {
    return true
  }
  return false
})
</script>

<template>
  <van-tabbar v-if="show" v-model="active" route placeholder safe-area-inset-bottom>
    <div class="item flex-1 flex flex-col justify-center items-center gap-2 text-#7a6495" @click="router.replace('/')">
      <div class="i-carbon:home?mask text-24" />
      <span class="color-primary">首页</span>
    </div>
    <div class="item flex-1 flex flex-col justify-center items-center gap-2" @click="router.replace('/profile')">
      <div class="i-carbon:user" />
      <span class="color-gray-500">我的</span>
    </div>
    <div class="item flex-1 flex flex-col justify-center items-center gap-2 text-#7a6495" @click="router.replace('/')">
      <div class="i-carbon:chevron-down?mask text-24" />
      <span class="color-primary">首页</span>
    </div>
    <div class="item flex-1 flex flex-col justify-center items-center gap-2" @click="router.replace('/profile')">
      <div class="i-carbon:user" />
      <span class="color-gray-500">我的</span>
    </div>
    <div class="item flex-1 flex flex-col justify-center items-center gap-2 text-#7a6495" @click="router.replace('/')">
      <div class="i-carbon:home?mask text-24" />
      <span class="color-primary">首页</span>
    </div>
    <div class="item flex-1 flex flex-col justify-center items-center gap-2" @click="router.replace('/profile')">
      <div class="i-carbon:user" />
      <span class="color-gray-500">我的</span>
    </div>
    <!-- <van-tabbar-item replace to="/">
      {{ $t('tabbar.home') }}
      <template #icon>
        <div class="i-carbon:home" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/profile">
      {{ $t('tabbar.profile') }}
      <template #icon>
        <div class="i-carbon:user" />
      </template>
    </van-tabbar-item> -->
  </van-tabbar>

  <!-- <div class="h-50 flex">
    <div class="item flex-1 flex flex-col justify-center items-center gap-2" @click="router.push('/')">
      <div class="i-carbon:home" />
      <span class="color-primary">首页</span>
    </div>
    <div class="item flex-1 flex flex-col justify-center items-center gap-2" @click="router.push('/profile')">
      <div class="i-carbon:user" />
      <span class="color-gray-500">我的</span>
    </div>
  </div> -->
</template>
